import React, { useState, memo, useEffect } from "react";
import { Mask } from "antd-mobile";

import "./index.scss";

import cry_hongbao from "@Assets/images/prizeResBox/cry_hongbao.png";

export default function PrizeResultBox(props) {
  // 恭喜获得
  const WinPrize = memo((props) => {
    console.log(props);
    return (
      <div className="prizeResBox">
        <div className="title_icon"></div>
        <div className="prizeResBox_image">
          <img src={props.prizeData.imageUrl} alt="奖品图"></img>
        </div>
        <p className="noWrap">{props.prizeData.name}</p>
        <CloseBtn btnTitle="开心收下"></CloseBtn>
      </div>
    );
  });

  // 没有中奖
  const NoPrize = memo(() => {
    return (
      <div className="prizeResBox">
        <img className="noPrizeImg" src={cry_hongbao} alt="奖品图"></img>
        <p>很遗憾，这次没有中奖</p>
        <CloseBtn btnTitle="关闭"></CloseBtn>
      </div>
    );
  });

  //   关闭遮罩
  function CloseBtn(param) {
    return (
      <button
        className="prizeResBox_btn"
        onClick={(e) => props.closeResultBox(false)}
      >
        {param.btnTitle}
      </button>
    );
  }

  //   条件展示中奖弹框
  const [isGetPrize, setPrize] = useState(false);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (props.prizeData.goodsType !== 0) {
      setPrize(true);
    }
    // alert(props.isShowResultBox)
    setVisible(props.isShowResultBox);
    // debugger
  }, [props.isShowResultBox]);

  return (
    <Mask visible={visible} onMaskClick={() => props.closeResultBox(false)}>
      <div className="maskContent" style={{ marginTop: "60%" }}>
        {isGetPrize ? (
          <WinPrize prizeData={props.prizeData}></WinPrize>
        ) : (
          <NoPrize></NoPrize>
        )}
      </div> 
    </Mask>
  );
}
